<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layuilast.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <div id="tabDIV" style="display: block">
        <div class="layui-row" style="margin-top: 3vh;">

            <div class="layui-inline">
                <label class="layui-form-label">设备编号</label>
                <div class="layui-input-inline">
                    <input type="text" id="deviceMac1" autocomplete="off" class="layui-input" placeholder="设备编号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">管理人名称</label>
                <div class="layui-input-inline">
                    <input type="tel" id="deviceUser1" autocomplete="off" class="layui-input" placeholder="填写管理人名称">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">管理人手机号</label>
                <div class="layui-input-inline">
                    <input type="tel" id="devicePhone1" autocomplete="off" class="layui-input" placeholder="填写管理人手机号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">设备所在城市</label>
                <div class="layui-input-inline">
                    <input type="tel" id="city1" autocomplete="off" class="layui-input" placeholder="填写设备所在城市">
                </div>
            </div>
       
            <div class="layui-inline" style="float: right;margin-top: 1vh;margin-right: 1vh">
				<button id="btn-addall" class="layui-btn"  >
					 <i class="layui-icon layui-icon-add-1" ></i>批量导入
					</button>
                <button class="layui-btn" onclick="reset()">
                    <i class="layui-icon layui-icon-delete"></i>清除
                </button>
                <button class="layui-btn" onclick="search()">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
                <button id="btn-add" class="layui-btn">
                    <i class="layui-icon layui-icon-add-1"></i>新增
                </button>
								
                <!--            <button id="btn-export" class="layui-btn" onclick="exclUser()">-->
                <!--                <i class="layui-icon layui-icon-add-1"></i>导出-->
                <!--            </button>-->
            </div>
			
        </div>
        <table id="table" lay-filter="table"></table>
    </div>
    <div id="editForm" style="display: none; height: 100%;margin-top: 30px;">
        <form class="layui-form" id="updateForm" enctype="multipart/form-data">
            <input type="hidden" name="id">


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备编号</label>
                    <div class="layui-input-block">
                        <input id="deviceMac" type="text" name="devicesn" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="devicedesc" id="deviceDes" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备管理人</label>
                    <div class="layui-input-block">
                        <input type="text" name="adminname" id="rePwd" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">管理人手机号</label>
                    <div class="layui-input-block">
                        <input type="text" id="adminphone" name="adminphone" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备所在城市</label>
                    <div class="layui-input-block">
                        <input type="text" name="city" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备经度</label>
                    <div class="layui-input-block">
                        <input type="text" name="jingdu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备纬度</label>
                    <div class="layui-input-block">
                        <input type="text" name="weidu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <a href="http://api.map.baidu.com/lbsapi/getpoint/index.html?qq-pf-to=pcqq.c2c" target="_blank" style="text-decoration:underline;margin-left: 11%;color: #0000FF">根据地址获取经纬度</a>
        </form>
    </div>
    <div id="addressDiv" style="display: none">
        <table id="addressTab" lay-filter="addressTab"></table>
    </div>

</body>


<script charset="utf-8" src="../../layui/js/jquery/jquery.js"></script>
<script charset="utf-8" src="../../layui/js/jquery/jquery.serializeJSON.js"></script>
<script charset="utf-8" src="../../layui/layuilast.js"></script>
<script charset="utf-8" src="../../layui/js/md5/md5.min.js"></script>
<script charset="utf-8" src="../../layui/js/extend/common.js"></script>
<!--<script src="../../js/http.js"></script>-->
<script type="text/javascript">
    var  rootUrl=localStorage.getItem('rootUrl');
    var pageURL = rootUrl+"/device/getDeviceListByAdminAndSubAdmin";
    var insertURL = "\/yk\/ykAdminDevManger\/addDevice";
    var updateDataURL = "\/yk\/ykAdminDevManger\/updateDevice";
    var delURL = "\/yk\/ykUser\/deleteLeaseUser";
    var uploadURL = "\/yk\/mita\/uploadFile";
    var tableId = "table";
    var cols = [
        [{
                title: '序号',
                templet: '#indexTpl',
                width: 50
            },
            // {field: 'id',title: '用户ID', hide:false},
            {
                field: 'deviceSn',
                title: '设备名称'
            },
            {
                field: 'devicedesc',
                title: '设备描述'
            },
            {
                field: 'jingdu',
                title: '经度'
            },
            {
                field: "weidu",
                title: '纬度'
            },
            {
                field: "address",
                title: '设备地址'
            },
            {
                field: "city",
                title: '设备所在城市'
            },
            // {field: "isDelete", title: '是否禁用',templet : '#isEnableStatus', width : 130},
            {
                toolbar: "#barDemo",
                align: 'center',
                title: '操作',
                width: 254,
                align: 'left'
            }
        ]
 
    ];


    function exclUser() {
        var usertType = $("#roleId").val().trim();
        window.location.href = "/leaseUser/downloadOrderUser?time==usertType" + usertType;
    }

    //表格数据初始化
    if(!localStorage.getItem('token')||!localStorage.getItem('userid')){
        window.location.href='../login.html'}else{
		console.log("device");
    initTab(tableId, "#table", "table", pageURL, cols, {
		adminuserid:localStorage.getItem('userid'),
        userid:localStorage.getItem('userid'),
        token:localStorage.getItem('token')
    }, null);
     }

    function reset() {
       /* $("#deviceMac1").val("");
        $("#deviceUser1").val("");
        $("#devicePhone1").val("");
        $("#city1").val("");*/
		//window.location.reload();
		
    }

    //条件查询
    function search() {
        	let devicesn = $("#deviceMac1").val().trim();
       		let adminname = $("#deviceUser1").val().trim();
       		let adminphone = $("#devicePhone1").val().trim();
       		let city = $("#city1").val().trim();
		var url=rootUrl+"/device/getDeviceListByDeviceSnAndAdminNameAndAdminPhoneAndCity";
  
           initTab(tableId, "#table", "table", url, cols, {
               userid:localStorage.getItem('userid'),
               token:localStorage.getItem('token'),
       				devicesn: devicesn,
       				adminname: adminname,
       				adminphone: adminphone,
       				city: city
           }, null);
    }






    //打开编辑框
    function openEditForm(type,deviceid) {
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            // skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高
            anim: 2,
            shadeClose: true, //开启遮罩关闭,
            maxmin: true,
            title: "编辑用户信息",
            content: $("#editForm"),
            btn: ['提交', '关闭'],
            yes: function(index, layero) {
                
                var data = $('#updateForm').getData();
                const formData = new FormData($("#updateForm" )[0]);
                var deviceMac = $("#deviceMac").val().trim();
                data.deviceMac = deviceMac;
                for (var key in data) {
                    var element = data[key];
                    if (key != "id") {
                        console.log("key----->" + key + "  element = " + element)
                        if (element == null || element == '' || element == undefined) {
                            layer.alert("表单数据没有填写完全!");
                            return;
                        }
                    }
                }
                formData.append('token',localStorage.getItem('token')),
                formData.append('userid',localStorage.getItem('userid'))
                switch (type){
                    case 'add':
					//console.log("add");
					$.ajax({
            url: rootUrl+"/device/addDevice",
            asynnc:false,
            cache:false,            
            data: formData,
            dataType: 'json',
            contentType: false,
             processData: false,
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
                          
         
                break;
                    case 'edit':
					
                    formData.append('deviceid',deviceid)
					$.ajax({
            url: rootUrl+"/device/modifyDevice",
            asynnc:false,
            cache:false,            
            data: formData,
            dataType: 'json',
            contentType: false,
             processData: false,
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
                             
                            break; 
				
                }    
            }
        });
    }


    layui.use(['table', 'form', 'upload'], function() {
        var table = layui.table;
        var form = layui.form();
        var upload = layui.upload;

        //新增
        $("#btn-addall").click(function() {
			var index = layer.open({
			    title: '批量导入',
			    type: 2,
			    shade: 0.2,
			    maxmin: true,
			    shadeClose: true,
			    area: ['80%', '80%'],
			    content: 'form/batchadd.html',
			});
			$(window).on("resize", function () {
			    layer.full(index);
			});
			return;
           
        });
				
        //新增
        $("#btn-add").click(function() {
			
            $("#updateForm")[0].reset();
            $("#id").val("");
            form.render();
            $("#deviceMac").attr("disabled", false);
            openEditForm('add');
        });
					
				

        //删除和修改
        table.on('tool(table)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                console.log(data);
                $("#deviceMac").val(data.deviceSn);
                $("#deviceDes").val(data.devicedesc);
                $("#rePwd").val(data.adminName);
                $("#adminphone").val(data.adminPhone);
                $('#updateForm').loadData(data);
                $("#deviceMac").attr("disabled", true);
                form.render();
                openEditForm('edit',data.deviceId);
            }
			if (obj.event === 'del') {
				console.log("del");				
			    console.log(data);
			    $.ajax({
			        url: rootUrl+"/device/modifyDeviceAdmin",
			        asynnc:false,
			        cache:false,            
			        data: {
			    	deviceid:data.deviceId,
			    	adminuserid:localStorage.getItem('upUserId'),
			    	
			    	userid:localStorage.getItem('userid'),
			        token:localStorage.getItem('token')
			    	},
			        dataType: 'json',
			       
			        type: 'post',
			        success: function(res){
			            if (res.errorcode == 0) {
			    		layer.msg(res.resultmsg);
			                location.reload();
			            }else{
			               layer.msg(res.resultmsg);
			            }
			    		
			        },
			        error: function(res) {
			            // 服务器繁忙
			            alert('服务器繁忙');
			        },
			    
			    });
			}

        });


    });


    function openUrl(url) {
        window.open(url);
    }
</script>

<!-- 启用禁用开关-->
<script type="text/html" id="isEnableStatus">
{{# if(d.isDelete == 1){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="isEnable" />
    {{# }else if(d.isDelete==0){ }}
        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="isEnable" checked="checked" />
        {{# } }}
</script>

<!--table的序号-->
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>



<!--table的操作按钮-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
       <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <!--    <a class="layui-btn layui-btn-xs" lay-event="address">收货地址</a>-->
    <!--    {{# if(d.type==3||d.type==5||d.type==6||d.type==7||d.type==8){ }}-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="addSales">添加销售</a>-->
    <!--    {{# } }}-->
</script>

</html>